
import React from 'react'
import { useState } from 'react'

import "./index.css"

export default function Item({ todo, done, id, setTodoList, todoList }) {
  //  {...item}  props  { id: nanoid(), todo: "唱", done: false }
  // {todo,done} { id: nanoid(), todo: "唱", done: false }
  //todo 唱
  //done false
  //解析出来的 数据
  // defaultChecked 解决报错

  //写样式  设置usestae（）render刷新   给li帮事件 给li绑定classname 在事件中调用setstate（true）
  // 优化
  // 移入引出函数合并 函数柯里化

  //
  //表单改变 建议帮onChange事件
  // 给输入框绑定事件函数
  /* 
  */

  //多徐框
  //多选框触发改变的事件函数
  const checkChangeHandle = (e) => {
    // console.log(e.target.checked);
    const newTodo = todoList.map(item => {
      if (item.id === id) {
        item.done = e.target.checked;
      }
      return item
    })

    setTodoList(newTodo);
  }



  //移入移出
  const [isActive, setActive] = useState(false)

  const MouseEnterHander = () => {
    // console.log(11);
    setActive(true)
  }
  const MouseLeaveHander = () => {
    // console.log(2);
    setActive(false)
  }

  //删除
  const deleteHander = () => {
    const newTodoList = todoList.filter(item => item.id !== id)
    setTodoList(newTodoList)
  }





  return (
    <li onMouseEnter={MouseEnterHander}
      onMouseLeave={MouseLeaveHander}
      className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button onClick={deleteHander} className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
